<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <title>送对联</title>
    <meta name="viewport"
        content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="full-screen" content="true" />
    <meta name="screen-orientation" content="portrait" />
    <meta name="x5-fullscreen" content="true" />
    <meta name="360-fullscreen" content="true" />
    <style>
        html,
        body {
            -ms-touch-action: none;
            background: #888888;
            padding: 0;
            border: 0;
            margin: 0;
            height: 100%;
            background-image: url(./resource/assets/Image/1/bg_test.png);
            background-size: cover;
        }

        #divImage {
            width: calc(85% + 5px);
            position: fixed;
            top: calc(4% + 10px);
            left: 50%;
            transform: translateX(-50%);
            z-index: 7;
            box-sizing: border-box;
        }

        #shareImage {
            width: 100%;
            pointer-events: initial;
        }

        .building {
            width: 100%;
            position: fixed;
            /*top: 0;*/
            bottom: 0;
            z-index: 1;
        }

        #miva_input,
        #miva_input_div {
            width: 60%;
            height: 34%;
            position: absolute;
            top: 21%;
            left: 20%;
            z-index: 10;
            opacity: 0;
            display: none;;
            pointer-events: initial;
        }
        #MivaEgret{
            z-index: 10;
            pointer-events: none;
        }
        .upload{
            width: 60%;
            height: 34%;
            position: absolute;
            top: 21%;
            left: 20%;
            z-index: 9;
            display: none;;
            pointer-events: initial;
            object-fit: scale-down;
        }
        .loading-mask {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            background: #000;
            z-index: 200;
        }
        .loading-text{
            position: absolute;
            top: 60%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 12px;
            color: #fff;
        }
        .loading{
            width: 40%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-resize/1.1/jquery.ba-resize.min.js"></script>
    <script src="./resource/assets/jquery.fireworks.js"></script>
    <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
</head>

<body>
    <img class="building" src="./resource/assets/Image/1/building.png" alt="">
    <div class="loading-mask">
        <img src="http://miva-unmcc.oss-cn-beijing.aliyuncs.com/egg-multipart/loading.gif" class="loading">
        <p class="loading-text">加载中...</p>
    </div>
    <div id="MivaEgret">
        <img style="display: none" id="miva" src="./resource/assets/Image/1/bg_test.png">
        <input id="miva_input" type="file">
        <div id="miva_input_div" ></div>
        <div id="divImage" style="display: none">
            <img id="shareImage" src="" alt="">
        </div>
        <img  src="" alt="" class="upload">
    </div>

    <script type="text/javascript">
        $('body').fireworks({
            sound: false, // sound effect
            opacity: 0,
            width: '100%',
            height: '100%'
        });
    </script>

    <script>
        const wx = window['wx'];
        const url = location.href.split('#')[0];
        let urlData = {
            url: encodeURIComponent(url)
        }
        $.get('http://unmcc.com/unmcc/miva/miva-wx.php', urlData, function (res) {
            res = JSON.parse(res)
                if (res != []) {
                    wx.config({
                        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                        appId: res.appId, // 必填，公众号的唯一标识
                        timestamp: res.timestamp, // 必填，生成签名的时间戳
                        nonceStr: res.nonceStr,   // 必填，生成签名的随机串
                        signature: res.signature, // 必填，签名，见附录1
                        jsApiList: [
                            'onMenuShareTimeline',
                            'onMenuShareAppMessage',
                            'chooseImage',
                        ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                    });
                }
        })
    </script>


    <div style="margin: auto;width: 100%;height: 100%; z-index: 2" class="egret-player"
         data-entry-class="Main"
         data-orientation="auto"
         data-scale-mode="showAll"
         data-frame-rate="60"
         data-content-width="640"
         data-content-height="1136"
         data-multi-fingered="2"
         data-show-fps="false" data-show-log="false"
         data-show-fps-style="x:0,y:0,size:12,textColor:0xffffff,bgAlpha:0.9">
    </div>

    <script>
        var loadScript = function (list, callback) {
            var loaded = 0;
            var loadNext = function () {
                loadSingleScript(list[loaded], function () {
                    loaded++;
                    if (loaded >= list.length) {
                        callback();
                    }
                    else {
                        loadNext();
                    }
                })
            };
            loadNext();
        };

        var loadSingleScript = function (src, callback) {
            var s = document.createElement('script');
            s.async = false;
            s.src = src;
            s.addEventListener('load', function () {
                s.parentNode.removeChild(s);
                s.removeEventListener('load', arguments.callee, false);
                callback();
            }, false);
            document.body.appendChild(s);
        };

        var xhr = new XMLHttpRequest();
        xhr.open('GET', './manifest.json?v=' + Math.random(), true);
        xhr.addEventListener("load", function () {
            var manifest = JSON.parse(xhr.response);
            var list = manifest.initial.concat(manifest.game);
            loadScript(list, function () {
                /**
                 * {
                 * "renderMode":, //Engine rendering mode, "canvas" or "webgl"
                 * "audioType": 0 //Use the audio type, 0: default, 2: web audio, 3: audio
                 * "antialias": //Whether the anti-aliasing is enabled in WebGL mode, true: on, false: off, defaults to false
                 * "calculateCanvasScaleFactor": //a function return canvas scale factor
                 * }
                 **/
                egret.runEgret({
                    renderMode: "webgl", audioType: 0, calculateCanvasScaleFactor: function (context) {
                        var backingStore = context.backingStorePixelRatio ||
                            context.webkitBackingStorePixelRatio ||
                            context.mozBackingStorePixelRatio ||
                            context.msBackingStorePixelRatio ||
                            context.oBackingStorePixelRatio ||
                            context.backingStorePixelRatio || 1;
                        return (window.devicePixelRatio || 1) / backingStore;
                    }
                });
            });
        });
        xhr.send(null);
    </script>
</body>

</html>